<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#butContent{
				display: flex;
				justify-content: space-around;
				width: 60%;
			}
			li{
				list-style: none;
				/* display: block; */
			}
			.zi{
				display: none;
				
			}
			.fu:hover>button{
				display: block;
			}
			table{
				width: 60%;
			}
		</style>
	</head>
	<body>
		<div class="box">
				<table class="core" border="1" cellpadding="0" cellspacing="0">
					<thead>
						<tr>
							<th><input type="checkbox" id="checkAllBtn" onclick="checkAll()" />全选</th>
							<th>商品名称</th>
							<th>单价</th>
							<th>数量</th>
							<th>小计</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<!-- <tr>
							<td><input type="checkbox"/></td>
							<td><img src="img/ErJi.png"/>商品名称</td>
							<td>单价</td>
							<td>数量</td>
							<td>小计</td>
							<td><button type="button">x</button></td>
						</tr> -->
					</tbody>
				</table>
				<div class="foot core">
					<span id='zongjia'>合计:0元<span>
				</div>
				<p id="p2">
					买了该商品的还买了
				</p>
				<ul class="core" id="butContent">
					<!-- <li class="fu" data-myid='1'>
						<img src="./img/ErJi.png" id="picture" />
						<p id="good">RedmiAirDots真无线耳机</p>
						<p><span id="price">99.9</span>元</p>
						<p>4.3万人好评</p>
						<button type="button" class="zi">加入购物车</button>
					</li> -->
				</ul>
		</div>
	</body>
	<script src="../js/03.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var butContent = document.getElementById('butContent')
		var tbody = document.querySelector('tbody')
		var zongjia = document.getElementById('zongjia')
		var checkAllBtn = document.getElementById('checkAllBtn')
		//首屏渲染
		getlocal()
		showfun()
		var btns = document.querySelectorAll('li>button')  //由于咱们button是动态渲染的  所以必须放后面
		var imgs = document.querySelectorAll('li>img')
		var goodps = document.getElementsByClassName('goodp')
		var pPriceSpans = document.getElementsByClassName('pPriceSpan')
		var arrBut = []
		var arr = [
			// {id:1,src:'',name:'',price:0,count:1,sum:0}
		]
		var zSum = 0
		//取
		function getlocal(){
			var str = localStorage.getItem('obj20191112')
			arrBut = JSON.parse(str).arr
			if(arrBut == null){
				arrBut = []
			}
		}
		//取值2
		function getLocal2(){
			var str = localStorage.getItem('arr')
			arr = JSON.parse(str)
			if(arr == null){
				arr = []
			}
		}
		//存
		function setLocal2(arr){
			localStorage.setItem('arr',JSON.stringify(arr))
		}
		//首屏渲染
		getLocal2()
		showFun2()
		//渲染下面5个商品
		function showfun(){
			butContent.innerHTML = ''
			for(var i=0;i<arrBut.length;i++){  // 0 1 2 3 4 
				butContent.innerHTML +=`<li class="fu" data-myid='${i}'>
						<img src='img/${arrBut[i].img}' id="picture" />
						<p id="good" class="goodp">${arrBut[i].goodsName}</p>
						<p><span id="price" class="pPriceSpan">${arrBut[i].price}</span>元</p>
						<p>${arrBut[i].goodsRatings}</p>
						<button type="button" class="zi">加入购物车</button>
					</li>`
			}
		}
		
		//加入购物车 // {id:1,src:'',name:'',price:0,count:1,sum:0}
		for(let i=0;i<btns.length;i++){
			btns[i].onclick = function(){
				var obj = {}
				var myid = btns[i].parentNode.getAttribute('data-myid') 
				var b = arr.some(function(item){
					return item.id == myid//判断商品id是否一样
				})
				if(b){
					for (var j=0;j<arr.length;j++) {
						if(arr[j].id == myid){
							arr[j].count +=1
							arr[j].sum = (arr[j].price * arr[j].count).toFixed(2)
						}
					}
				}else{
					var price = pPriceSpans[i].innerHTML
					obj.id = myid    //为什么不用时间戳  因为相同的商品是可以叠加在一起的
					obj.src = imgs[i].getAttribute('src')
					obj.name = goodps[i].innerHTML
					obj.price = price
					obj.count = 1
					obj.sum = price
					arr.push(obj)
				}
				setLocal2(arr)
				showFun2()
			}
		}
		//渲染方法
		function showFun2(){
			tbody.innerHTML = ''
			zSum = 0
			for(var i=0;i<arr.length;i++){
				tbody.innerHTML +=`<tr>
							<td><input type="checkbox" value="${arr[i].id}" class='ischeckbox'/></td>
							<td><img style="width:23px; height:23px;" src="${arr[i].src}"/>${arr[i].name}</td>
							<td>${arr[i].price}</td>
							<td><button type="button" onclick="jianFun(${arr[i].id})">-</button>${arr[i].count}<button type="button" onclick="jiaFun(${arr[i].id})">+</button></td>
							<td>${arr[i].sum}</td>
							<td><button type="button" onclick='delFun(${arr[i].id} )'>x</button></td>
						</tr>`
				zSum +=Number(arr[i].sum)
			}
			zSum = zSum.toFixed(2)
			zongjia.innerHTML = `合计：${zSum}元`
		}
		//减
		function jianFun(myid){
			for (var i=0;i<arr.length;i++) {
				if(arr[i].id == myid){
					if(arr[i].count > 1){
						arr[i].count -=1
						arr[i].sum = (arr[i].price * arr[i].count).toFixed(2)
					}
				}
			}
			setLocal2(arr)
			showFun2()
		}
		//加
		function jiaFun(myid){
			for (var i=0;i<arr.length;i++) {
				if(arr[i].id == myid){
						arr[i].count +=1
						arr[i].sum = (arr[i].price * arr[i].count).toFixed(2)
				}
			}
			setLocal2(arr)
			showFun2()
		}
		//删除
		function delFun(myid){
			// console.log(myid)
		for (var i=0;i<arr.length;i++) {
			if(arr[i].id == myid){
				arr.splice(i,1)
				setLocal2(arr)
				showFun2()
			}
		}	
	}
	//全选
	function checkAll(){
		var ischeckboxs = document.getElementsByClassName('ischeckbox')
		for (var i=0;i<ischeckboxs.length;i++) {
			if(checkAllBtn.checked){
				ischeckboxs[i].checked = true
			}else{
				ischeckboxs[i].checked = false
			}
		}
	}
	</script>
</html>
